<!doctype html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <title>编辑用户</title>
  <link rel="stylesheet" href="./asset/css/components.css" />
  <link rel="stylesheet" href="./asset/css/bootstrap.css" />
  <link rel="stylesheet" href="./asset/css/plugins.css" />
  <link rel="stylesheet" href="./asset/css/main.css" />
  <link rel="stylesheet" href="./asset/css/themes.css" />
</head>

<body>
<div id="body">
  <div id="app">
    <div class="tabbody">
      <div class="bodyli active">
        <div class="inputbox">
          <span class="title">用户名</span>
          <div class="inputright">
            <input type="text" id="username" v-model="username"
                   class="form-control input-sm" placeholder="请输入用户名">
          </div>
        </div>
        <div class="inputbox">
          <span class="title">密码</span>
          <div class="inputright">
            <input type="password" id="password" v-model="password" class="form-control input-sm"
                   placeholder="请输入密码">
          </div>
        </div>
        <div class="inputbox">
          <span class="title">姓名</span>
          <div class="inputright">
            <input type="text" id="realname" v-model="realname"
                   class="form-control input-sm" placeholder="请输入姓名">
          </div>
        </div>  <div class="inputbox">
        <span class="title">性别</span>
        <div class="inputright">
          <select id="sex" value="" type="sex" style="flex: 1;color:#999;height: 30px;padding: 0px 10px;border: 1px solid #ddd;font-size: 12px;line-height: 1.5;" name="sex" v-model="sex" lay-verify="">
            <option value="">请选择性别</option>
            <option value="男">男</option>
            <option value="女">女</option>
          </select>
        </div>
      </div>
        <div class="inputbox">
          <span class="title">年龄</span>
          <div class="inputright">
            <input type="text" id="age" v-model="age" class="form-control input-sm"
                   placeholder="请输入年龄">
          </div>

        </div>
        <div class="inputbox">
          <span class="title">联系方式</span>
          <div class="inputright">
            <input type="text" id="contact" v-model="tel"
                   class="form-control input-sm" placeholder="请输入联系方式">
          </div>
        </div>
        <div class="inputbox" style="display: none;">
          <span class="title">类型</span>
          <div class="inputright">
            <input type="text" id="type" v-model="type"
                   class="form-control input-sm" placeholder="">
          </div>
        </div>
        <div class="tbfooter">
          <button class="btn btn-success" @click.prevent="update()">
            <i class="fa fa-floppy-o"></i> 提交保存
          </button>
          &nbsp;&nbsp;&nbsp;
          <button class="btn btn-default" @click.prevent="reset()">
            <i class="fa fa-recycle"></i> 取消
          </button>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="./asset/js/jquery.min.js"></script>
    <script type="text/javascript" src="./asset/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="./asset/js/axios.min.js"></script>
    <script type="text/javascript" src="./asset/js/vue.js"></script>
    <script type="text/javascript">
      const vue = new Vue({
        el: '#app',// 绑定作用域
        data: { //定义数据用于vue的双向绑定
          id: '',
          username: '', // 用户名
          password: '', // 密码
          realname: '', // 姓名
          tel: '', // 联系方式
          sex: '', //
          age: '', //
          type: '1', //
        },
        methods: {
          getUrlParam: function () {
            var name, value;
            var str = location.href; // 取得整个地址栏
            var num = str.indexOf("?"); // 定位参数起始位置
            str = str.substr(num + 1); // 取得所有参数
            var arr = str.split("&"); // 各个参数放到数组里
            for (var i = 0; i < arr.length; i++) {
              num = arr[i].indexOf("=");
              if (num > 0) {
                name = arr[i].substring(0, num);
                value = arr[i].substr(num + 1);
                this.id = value; // 确认主键参数
              }
            }
          },
          loadPage: function () {
            let _this = this;
            axios.get('http://127.0.0.1:8080/equipment/user/getUserById.action?id=' + _this.id).then(result => {
              _this.username= result.data.username;
              _this.password= result.data.password;
              _this.realname= result.data.realname;
              _this.tel= result.data.tel;
              _this.sex= result.data.sex;
              _this.age= result.data.age;
              _this.type= result.data.type;
            });
          },
          reset: function () {
            this.loadPage();
          },
          update: function () {
            let _this = this;
            var data = {
              id: _this.id,
              username: _this.username,
              password: _this.password,
              realname: _this.realname,
              tel: _this.tel,
              age: _this.age,
              sex: _this.sex,
              type:_this.type,
            };
            axios.post('http://127.0.0.1:8080/equipment/user/updateUser.action', data).then(result => {
              if (result.data.code > 0) {
                var index = parent.layer.getFrameIndex(window.name);
                parent.location.reload();
                parent.layer.close(index);
              } else {
                alert('修改失败');
              }
            });
          },
        },

        created() { // 生命周期相关的函数
          this.getUrlParam();
          this.loadPage();
          let _this = this;
        },
      })
    </script>
</body>

</html>


